<template>
	<view class="e-navbar">
		<view class="e-navbar__placeholder" v-if="props.fixed && props.placeholder" :style="{
				height: addUnit(getPx(props.height) + sys().statusBarHeight!,'px'),
			}"></view>
		<view :class="[props.fixed && 'e-navbar--fixed']">
			<e-status-bar v-if="props.safeAreaInsetTop" :bgColor="props.bgColor"></e-status-bar>
			<view class="e-navbar__content" :class="[border && 'e-border-bottom']" :style="{
					height:addUnit(props.height),
					backgroundColor: props.bgColor,
				}">
				<view class="e-navbar__content__left" hover-class="e-navbar__content__left--hover"
					hover-start-time="150" @tap="leftClick">
					<slot name="left">
						<e-icon v-if="props.leftIcon" :name="props.leftIcon" :size="props.leftIconSize"
							:color="props.leftIconColor"></e-icon>
						<text v-if="props.leftText" :style="{
								color: props.leftIconColor
							}" class="e-navbar__content__left__text">{{ props.leftText }}</text>
					</slot>
				</view>
				<slot name="center">
					<text class="e-line-1 e-navbar__content__title" :style="[{
							width: addUnit(props.titleWidth),
						}, addStyle(props.titleStyle)]">{{ props.title }}</text>
				</slot>
				<view class="e-navbar__content__right" v-if="$slots.right || props.rightIcon || props.rightText"
					@tap="rightClick">
					<slot name="right">
						<e-icon v-if="props.rightIcon" :name="props.rightIcon" size="20"></e-icon>
						<text v-if="props.rightText" class="e-navbar__content__right__text">{{ props.rightText }}</text>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * Navbar 自定义导航栏
	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
	 * @tutorial https://www.uviewui.com/components/navbar.html
	 * @property {Boolean}			safeAreaInsetTop	是否开启顶部安全区适配  （默认 true ）
	 * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
	 * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
	 * @property {Boolean}			border				导航栏底部是否显示下边框 （默认 false ）
	 * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
	 * @property {String}			leftText			左边的提示文字
	 * @property {String}			rightText			右边的提示文字
	 * @property {String}			rightIcon			右边返回图标的名称，只能为uView自带的图标
	 * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
	 * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
	 * @property {String | Number}	titleWidth			导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
	 * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
	 * @property {String | Number}	leftIconSize		左侧返回图标的大小（默认 20px ）
	 * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
	 * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
	 * @property {Object | String}	titleStyle			标题的样式，对象或字符串
	 * @event {Function} leftClick		点击左侧区域
	 * @event {Function} rightClick		点击右侧区域
	 * @example <e-navbar title="剑未配妥，出门已是江湖" left-text="返回" right-text="帮助" @click-left="onClickBack" @click-right="onClickRight"></e-navbar>
	 */
	export default defineComponent({
		name: "e-navbar",
		mixins: [mpMixin]
	});
</script>

<script lang="ts" setup>
	import {
		toRefs
	} from 'vue'
	import {
		navbarProps,
		navbarEmit
	} from './props';
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import {
		addUnit,
		addStyle,
		getPx
	} from '../../libs/utils/_utils'
	import {
		sys
	} from '../../libs/utils'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		navbar: navbarDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(navbarProps)
	const props = useDefaultProps < DefaultProps['navbar'] > (_props, navbarDefaultProps);
	const emit = defineEmits(navbarEmit)

	// 点击左侧区域
	const leftClick = () => {
		// 如果配置了autoBack，自动返回上一页
		emit('leftClick')
		if (props.value.autoBack) {
			uni.navigateBack()
		}
	}
	// 点击右侧区域
	const rightClick = () => {
		emit('rightClick')
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/navbar.scss";
</style>
